<!--
 * @Author: delin66
 * @Date: 2024-12-11 17:55:08
 * @LastEditors: delin66
 * @LastEditTime: 2025-01-06 15:48:23
 * @Descripttion: 
-->
<!--
 * @Author: delin66
 * @Date: 2024-12-11 17:55:08
 * @LastEditors: delin66
 * @LastEditTime: 2024-12-11 17:57:34
 * @Descripttion: 
-->
<template>
  <div class="serviceList-list">
    <div class="categorylist">
      <div class="label">服务类别:</div>
      <div class="list">
        <div
          @click="onTypeChange(item)"
          :class="{ 'active': item.dictLabel === requestData.serviceCategory }"
          v-for="(item, index) in serviceTypeList"
          :key="index"
          class="category"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </div>
    <div class="card-list" v-if="!isEmpty" >
      <div @click="toDetail(serviceItem.id)" class="card c-p" v-for="serviceItem in serviceList" :key="serviceItem.id">
        <div class="img-container">
          <img :src="serviceItem.logo" alt="" />
        </div>

        <div class="content">
          <div class="name ellipsis">{{ serviceItem.name }}</div>
          <div class="info">
            <div class="label">服务类别：</div>
            <div class="">{{ generalCategoryString(serviceItem) }}</div>
          </div>
          <el-button type="primary" width="100%">进入主页</el-button>
        </div>
      </div>
    </div>
    <el-empty v-if="isEmpty" description="没有符合条件的企业" />
    <el-pagination
      v-if="!isEmpty"
      background
      class="m-t-10 m-b-10"
      style="justify-content: flex-end"
      layout="sizes, prev, pager, next"
      :page-count="pages"
      :page-size="requestData.size"
      :page-sizes="[10, 20]"
      v-model:current-page="requestData.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { getServiceOrganizationList, getServiceTypeList } from '@/api/enterpeise';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 跳转到企业详情
const router = useRouter();
const toDetail = (id: number) => {
  router.push({
    name: 'service-detail',
    query: {
      id,
    },
  });
};

const isEmpty = ref(false);

export interface Service {
  createTime: string;
  updateTime: string;
  createBy: string;
  updateBy: string;
  id: number;
  name: string;
  logo: string;
  serviceCategory: string[];
  contact: string;
  province: string;
  city: string;
  scale: number;
  keyResearchField: string[];
  ability: string[];
  introduction: string;
  status: number;
}

const serviceList = ref<Service[]>([]);
const categoryString = ref('')
// 分页
function handleSizeChange(val: number) {
  requestData.value.size = val;
  loadData();
}
function handleCurrentChange(val: number) {
  requestData.value.current = val;
  loadData();
}

function generalCategoryString(serviceItem: Service) {
  let categoryString = '';
  serviceItem.serviceCategory.forEach((item: string) => {
    categoryString += item + ' ';
  });
  return categoryString.substring(0, categoryString.length - 1);
}

onMounted(() => {
  loadData();
  getServiceTypeList().then((res: any) => {
    res.data.forEach((item: any) => {
      serviceTypeList.value.push({
        dictLabel: item.dictLabel,
        active: false,
      });
    });

  });
});

const requestData = ref({
  current: 1,
  size: 10,
  serviceCategory: '全部',
});

const serviceTypeList = ref([
  {
    dictLabel: '全部',
    active: true,
  }
]);

const total = ref(0);
const pages = ref(0)
function loadData() {
  const query = {...requestData.value};
  if (requestData.value.serviceCategory == '全部') {
    query.serviceCategory = ''
  }

  getServiceOrganizationList(query).then((res: any) => {
    if (res.code === 200) {
      serviceList.value = res.data.records;
      total.value = res.data.total;
      pages.value = res.data.pages;
      if (res.data.total === 0) {
        isEmpty.value = true;
      } else {
        isEmpty.value = false;
      }
    }
  });
}

function handleSearch() {
  loadData();
}
const onTypeChange = (item: any) => {
  console.log(item);
  requestData.value.serviceCategory = item.dictLabel;
  loadData();

};
</script>

<style scoped lang="scss">
.categorylist {
  display: flex;
  padding: 20px 20px 20px 0;
  align-items: center;
  .label {
    width: 100px;
    margin-right: 10px;
  }
  .list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .category {
      display: flex;
      align-items: center;
      cursor: pointer;
      height: 40px;
      text-align: center;
      border-radius: 5px;
      margin: 0 10px;
      &:hover {
        scale: 1.1;
      }
    }
    .active {
      color: #F62;
    }
  }
}
.serviceList-list {
  width: 100%;
  padding:0 30px;
  .search-bar {
    margin-bottom: 20px;
  }

  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    // justify-content: space-around;
    gap: 40px;
  }

  .card {
    padding: 20px;
    display: flex;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    .img-container {
      height: 90px;
      width: 90px;
      border: 1px solid #ddd;
      box-sizing: border-box;
      border-radius: 3px;
      overflow: hidden;
    }
    img {
      height: 100%;
      object-fit: contain;
      width: 100%;
    }
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 30px;
      overflow: hidden;
    }
    .name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .info {
      display: flex;
      margin-bottom: 20px;
      overflow: hidden;
      .label {
        width: 80px;
      }
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
